<template>
  <div class="app-container">
    <el-row :gutter="20" v-if="info.devId || info.sn">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>设备详情</span>
          </template>
          <el-row class="info_cont">
            <el-col :lg="4" :sm="6" :xs="24">
              <label>设备名称：</label>
              <span>{{ info.devName }}</span>
            </el-col>
            <el-col :lg="4" :sm="6" :xs="24">
              <label>设备号：</label>
              <span>{{ info.sn }}</span>
            </el-col>
            <el-col :lg="4" :sm="6" :xs="24" class="flex_cont">
              <label>设备版本：</label>
              <dict-tag :options="dev_version" :value="info.version" />
            </el-col>
            <el-col :lg="4" :sm="6" :xs="24" class="flex_cont">
              <label>设备状态：</label>
              <dict-tag :options="dev_status" :value="info.devStatus" />
            </el-col>
          </el-row>
          <div class="btn_group">
            <el-button type="primary" @click="handleRoadState(info.sn)">
              <span>刷新通道状态</span>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="info.devId || info.sn">
      <el-col :span="5" class="mt10" v-for="item in road_list" :key="item.road">
        <el-card v-if="item.state != 3">
          <template #header>
            <span>第{{ item.road }}路</span>
          </template>
          <el-row class="info_cont">
            <el-col>
              <el-row :gutter="20">
                <el-col :md="8">
                  <div v-if="item.state == 0" class="road_state online"></div>
                  <div v-if="item.state == 1" class="road_state used"></div>
                  <div v-if="item.state != 0 && item.state != 1" class="road_state error"></div>
                </el-col>
                <el-col :md="16">
                  <span>
                    实时功率：{{ item && item.pow != null ? item.pow : "-" }}
                  </span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div class="btn_group">
            <el-button type="primary" @click="handlePow(info.sn, item.road)">
              <span>查询功率</span>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="DevInfo">
import { getPow, getRoadState } from "@/api/equipment/control";
import { getDev } from "@/api/equipment/dev";
import { ElLoading } from "element-plus";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { dev_status, dev_version } = proxy.useDict("dev_status", "dev_version");

const loading = ref(true)
const showSearch = ref(true)
const queryParams = ref({
  devId: null,
})
const info = ref({})
const road_list = ref([])

function getDevInfo() {
  loading.value = true;
  getDev(queryParams.value.devId).then((response) => {
    if (response.code == 0) {
      if (response.data == null) {
        proxy.$modal.notifyError("查无设备");
      } else {
        info.value = response.data;
        queryParams.value.sn = info.value.sn;
        if (response.data.roadStatus != null) {
          road_list.value = formatRoad(
            JSON.parse(response.data.roadStatus)
          );
        }
      }
    }
  });
}

// 查询电桩线路状态
function handleRoadState(sn) {
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在查询",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getRoadState({ sn: sn })
    .then((response) => {
      loadingInstance.close();
      if (response.code == 0) {
        road_list.value = formatRoad(response.data);
        console.log(road_list.value);
      }
    })
    .catch((error) => {
      loadingInstance.close();
    });
}

// 格式化通道
function formatRoad(data) {
  let road_list = [];
  for (let i = 1; i < 11; i++) {
    let road_str;
    if (data[i] != null) {
      road_str = {
        road: i,
        state: data[i],
        data: null,
        pow: null,
        temp: null,
      };
      road_list.push(road_str);
    } else {
      road_str = {
        road: i,
        state: 3,
        data: null,
        pow: null,
        temp: null,
      };
      road_list.push(road_str);
    }
  }
  return road_list;
}

// 设备指令--查询电桩功率
function handlePow(sn, road) {
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在查询",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getPow({ sn: sn, road: road })
    .then((response) => {
      loadingInstance.close();
      if (response.code == 0) {
        road_list.value[road].pow = response.data.pow;
        road_list.value[road].data = response.data.data;
      }
    })
    .catch((error) => {
      loadingInstance.close();
    });
}

const id = route.query.id;
queryParams.value.devId = id;
if (queryParams.value.devId) {
  getDevInfo();
}
</script>

<style lang="scss" scoped>
.flex_cont {
  display: flex;
}

.info_cont {
  float: none;
  line-height: 36px;
  font-size: 14px;
  vertical-align: middle;
}

.btn_group {
  margin: 10px 0 0;
  padding: 10px 0 0;
  /* border-top: 1px solid #ccc; */
}

.mt10 {
  margin-top: 10px;
}

.el-col-5:deep() {
  width: 20%;
  flex: 0 0 20%;
}

.road_state {
  display: inline-block;
  width: 80px;
  height: 80px;
}

.nolink {
  background-image: url("../../../assets/images/nolink.png");
  background-size: cover;
}

.online {
  background-image: url("../../../assets/images/online.png");
  background-size: cover;
}

.used {
  background-image: url("../../../assets/images/used.png");
  background-size: cover;
}

.error {
  background-image: url("../../../assets/images/error.png");
  background-size: cover;
}
</style>
